<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="客户名称">
              <a-input allowClear placeholder="请输入" v-model="queryParam.userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="客户电话">
              <a-input allowClear placeholder="请输入" v-model="queryParam.mobile"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="客户微信">
              <a-input allowClear placeholder="请输入" v-model="queryParam.wechatId"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="处理状态">
                <j-dict-select-tag
                  allowClear
                  v-model="queryParam.orderStatus"
                  placeholder="请选择"
                  dictCode="orderStatus"
                />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="创建时间">
                <a-range-picker allowClear class="per100" v-model="tempTimes" @change="timeChange" />
              </a-form-item>
            </a-col>
          </template>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 1200 }"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a-button type="link" class="ml5 mr5" @click="detail(record.id)" size="small">详情</a-button>
        <a-button v-if="record.status === 0" type="primary" @click="approve(record.id)" class="ml5 mr5" size="small"
          >受理</a-button
        >
      </span>
    </a-table>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Api from '@/api/CompanyManage/BusinessApply'
import { filterDictText, initDictOptions } from '@comp/dict/JDictSelectUtil'
import { putAction } from '@api/manage'

export default {
  name: 'BusinessApply',
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: Api.list,
        approve: Api.approve
      },
      columns: [],
      businessApplicationStatusOptions: []
    }
  },
  created() {
    this.columns = [
      {
        title: '序号',
        dataIndex: 'index',
        align: 'center',
        customRender: (text, record, index) => `${index + 1}`
      },
      {
        title: '用户账号',
        align: 'center',
        dataIndex: 'userId',
        sorter: (a, b) => {
          return a.userId - b.userId
        }
      },
      {
        title: '客户名称',
        align: 'center',
        dataIndex: 'userName',
        sorter: (a, b) => {
          return a.userName - b.userName
        }
      },
      {
        title: '客户电话',
        dataIndex: 'mobile',
        align: 'center',
        sorter: (a, b) => {
          return a.mobile - b.mobile
        }
      },
      {
        title: '客户微信',
        dataIndex: 'wechatId',
        align: 'center',
        sorter: (a, b) => {
          return a.wechatId - b.wechatId
        }
      },
      {
        title: '所在地区',
        dataIndex: 'district',
        align: 'center',
        sorter: (a, b) => {
          return a.district - b.district
        }
      },
      {
        title: '详细地址',
        dataIndex: 'address',
        align: 'center',
        sorter: (a, b) => {
          return a.address - b.address
        }
      },
      {
        title: '处理状态',
        dataIndex: 'status',
        align: 'center',
        sorter: (a, b) => {
          return a.status - b.status
        },
        customRender: (text, record, index) => {
          //字典值替换通用方法
          return filterDictText(this.businessApplicationStatusOptions, text)
        }
      },
      {
        title: '处理人',
        dataIndex: 'approver',
        align: 'center',
        sorter: (a, b) => {
          return a.approver - b.approver
        }
      },
      {
        title: '处理时间',
        dataIndex: 'approveTime',
        align: 'center',
        sorter: (a, b) => {
          return a.approveTime - b.approveTime
        }
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
        sorter: (a, b) => {
          return a.createTime - b.createTime
        }
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ]
    this.initDictConfig()
  },
  methods: {
    initDictConfig() {
      initDictOptions('businessApplicationStatus').then(res => {
        if (res.success) {
          this.businessApplicationStatusOptions = res.result
        }
      })
    },

    // 创建时间改变
    timeChange(e, arr) {
      if (arr[0]) {
        this.queryParam.startTime = arr[0]
        this.queryParam.endTime = arr[1]
      } else {
        this.queryParam.startTime = undefined
        this.queryParam.endTime = undefined
      }
    },

    approve(id) {
      if (id) {
        putAction(this.url.approve + id).then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.loadData()
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    detail(id) {
      this.$router.push(`/companyManage/businessApplyDetail?id=${id}`)
    }
  }
}
</script>

<style scoped></style>

